{% extends 'migration_app/dashboard_base.html' %}

{% block title %}仪表盘 - Oracle到PolarDB-PG迁移平台{% endblock %}

{% block page_title %}仪表盘{% endblock %}

{% block dashboard_content %}
<!-- 统计卡片 -->
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card stat-card-primary mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h5 class="card-title">总任务数</h5>
                        <h2 class="display-4">{{ total_tasks }}</h2>
                    </div>
                    <div class="col-4 text-end">
                        <i class="fas fa-database fa-3x text-muted"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card stat-card-success mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h5 class="card-title">已完成</h5>
                        <h2 class="display-4">{{ completed_tasks }}</h2>
                    </div>
                    <div class="col-4 text-end">
                        <i class="fas fa-check-circle fa-3x text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card stat-card-warning mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h5 class="card-title">进行中</h5>
                        <h2 class="display-4">{{ running_tasks }}</h2>
                    </div>
                    <div class="col-4 text-end">
                        <i class="fas fa-spinner fa-3x text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card stat-card-danger mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h5 class="card-title">失败</h5>
                        <h2 class="display-4">{{ failed_tasks }}</h2>
                    </div>
                    <div class="col-4 text-end">
                        <i class="fas fa-exclamation-circle fa-3x text-danger"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图表和数据 -->
<div class="row">
    <!-- 进度图表 -->
    <div class="col-lg-6">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-chart-pie me-1"></i>
                迁移任务进度统计
            </div>
            <div class="card-body">
                <canvas id="taskStatusChart" width="100%" height="50"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 快速操作 -->
    <div class="col-lg-6">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-rocket me-1"></i>
                快速操作
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <a href="{% url 'migration_app:create_task' %}" class="btn btn-primary btn-lg w-100">
                            <i class="fas fa-plus-circle me-2"></i> 创建迁移任务
                        </a>
                    </div>
                    <div class="col-md-6 mb-3">
                        <a href="{% url 'migration_app:task_list' %}" class="btn btn-info btn-lg w-100">
                            <i class="fas fa-list me-2"></i> 查看所有任务
                        </a>
                    </div>
                    <div class="col-md-6 mb-3">
                        <a href="{% url 'migration_app:database_info' %}" class="btn btn-secondary btn-lg w-100">
                            <i class="fas fa-server me-2"></i> 数据库信息
                        </a>
                    </div>
                    <div class="col-md-6 mb-3">
                        <a href="{% url 'admin:index' %}" class="btn btn-dark btn-lg w-100">
                            <i class="fas fa-cog me-2"></i> 系统设置
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 最近的任务 -->
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table me-1"></i>
                最近迁移任务
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>任务名称</th>
                                <th>源数据库</th>
                                <th>目标数据库</th>
                                <th>创建时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in recent_tasks %}
                            <tr>
                                <td>{{ task.name }}</td>
                                <td>{{ task.source_db }}</td>
                                <td>{{ task.target_db }}</td>
                                <td>{{ task.created_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    {% if task.status == 'pending' %}
                                    <span class="badge bg-secondary status-badge">等待中</span>
                                    {% elif task.status == 'running' %}
                                    <span class="badge bg-warning status-badge">进行中</span>
                                    {% elif task.status == 'completed' %}
                                    <span class="badge bg-success status-badge">已完成</span>
                                    {% elif task.status == 'failed' %}
                                    <span class="badge bg-danger status-badge">失败</span>
                                    {% else %}
                                    <span class="badge bg-info status-badge">{{ task.status }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'migration_app:task_detail' task.id %}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i> 查看
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center">暂无迁移任务，请先<a href="{% url 'migration_app:create_task' %}">创建任务</a></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer text-end">
                <a href="{% url 'migration_app:task_list' %}" class="btn btn-primary">查看所有任务 <i class="fas fa-arrow-right ms-1"></i></a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 任务状态饼图
    document.addEventListener('DOMContentLoaded', function() {
        const statusCtx = document.getElementById('taskStatusChart').getContext('2d');
        const taskStatusChart = new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['已完成', '进行中', '等待中', '失败'],
                datasets: [{
                    data: [
                        {{ completed_tasks }}, 
                        {{ running_tasks }}, 
                        {{ pending_tasks }}, 
                        {{ failed_tasks }}
                    ],
                    backgroundColor: [
                        '#198754',  // 成功 - 绿色
                        '#ffc107',  // 进行中 - 黄色
                        '#6c757d',  // 等待中 - 灰色
                        '#dc3545'   // 失败 - 红色
                    ],
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                },
                cutout: '70%'
            }
        });
    });
</script>
{% endblock %} 